const gulp = require('gulp'),//引入gulp，自动去node_modules里面去找
    htmlmin = require('gulp-htmlmin'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    sass = require('gulp-sass'),
    cleanCss = require('gulp-clean-css'),
    connect = require('gulp-connect')

//制定了一个default任务，执行console语句
// gulp.task('default',() =>{
//     console.log('default')
// })

// 指定html任务:把html文件压缩后放到dist目录里
gulp.task('html', () => {
    gulp.src('src/**/*.html')
        .pipe(htmlmin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
            minifyJS: true,//压缩页面JS
            minifyCSS: true//压缩页面CSS
        }))
        .pipe(gulp.dest('dist'))
        .pipe(connect.reload())
})

// 制定js任务:ES6转ES5,压缩js
gulp.task('js', () => {
    gulp.src('src/js/**/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        // .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        .pipe(connect.reload())
})

// 制定css任务：压缩css
gulp.task('css', () => {
    gulp.src('src/css/**/*.scss')
        .pipe(sass())
        .pipe(cleanCss())
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload())
})

// 制定img任务：移动图片
gulp.task('img', () => {
    gulp.src('src/images/**/*')
        .pipe(gulp.dest('dist/images'))
        .pipe(connect.reload())
})
// 制定libs任务：移动文件
gulp.task('libs', () => {
    gulp.src('src/libs/**/*')
        .pipe(gulp.dest('dist/libs'))
        .pipe(connect.reload())
})

// 制定服务器(server)任务:开启一个本地服务器
gulp.task('server',() =>{
    connect.server({
        root:'dist',
        port:888,
        livereload:true //支持立即更新，代码一保存，浏览器自动更新
    })
})

// 制定watch任务：监听文件的修改，执行对应的任务
gulp.task('watch',() =>{
    gulp.watch('src/**/*.html',['html']),
    gulp.watch('src/js/**/*.js',['js']),
    gulp.watch('src/css/**/*.scss',['css'])
    gulp.watch('src/images/**/*',['img'])
    gulp.watch('src/libs/**/*',['libs'])
})

// 把所有任务放进default中，默认全部执行一次
gulp.task('default',['html','js','css','img','libs','server','watch'])